<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:include page="../../common/assets_header.jsp" />
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<script
	src="<%=request.getContextPath()%>/assets/js/date-time/bootstrap-datepicker.min.js"></script>
<script
	src="<%=request.getContextPath()%>/assets/js/jqGrid/jquery.jqGrid.min.js"></script>
<script
	src="<%=request.getContextPath()%>/assets/js/jqGrid/i18n/grid.locale-en.js"></script>
	
	<script type="text/javascript"
	src="<%=request.getContextPath()%>/plugins/zTree/jquery.ztree.all.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/plugins/zTree/jquery.ztree.core.js"></script>
<link
	href="<%=request.getContextPath()%>/plugins/zTree/zTreeStyle/zTreeStyle.css"
	rel="stylesheet" type="text/css" />
<link
	href="<%=request.getContextPath()%>/plugins/zTree/metroStyle/metroStyle.css"
	rel="stylesheet" type="text/css" />
	

	<script>
	
	jQuery(document).ready(function() {
		var moduleMenuId="${moduleMenuId}";
		var moduleInfoId="${moduleInfoId}";
		loadGird(moduleMenuId); 
		if(moduleMenuId!=""&&moduleInfoId!=""){
			$("#moduleInfoId").val(moduleInfoId);
			changeModule(moduleInfoId);
			 var treeObj = $.fn.zTree.getZTreeObj("tree");
			 var sNodes = treeObj.getNodesByParam("moduleMenuId",moduleMenuId , null);
			 if (sNodes.length > 0) {
				 var  nodes=sNodes[0];
				 $("#"+nodes.tId+"_a").click();
			 } 
		}
	})
	
	
	function add(){
		var isLastMenu=$("#isLastMenu").val();
		var moduleMenuId=$("#moduleMenuId").val();
		var moduleInfoId=$("#moduleInfoId").val();
		if(isLastMenu=="false"){
		location.href="<%=request.getContextPath()%>/module/purview/form?moduleMenuId="+moduleMenuId+"&moduleInfoId="+moduleInfoId;
		}else{
			noty({layout: 'center',text: "请选择子菜单",type: 'warning', timeout: 2000 });
		}
	}
	
	
	function del(){
		 var id = $("#grid-table").jqGrid('getGridParam', 'selrow');
		 var obj = null;
		 if(id){
			 obj = $("#grid-table").jqGrid('getRowData', id);
		 }else{
			 bootbox.alert({  
		            buttons: {  
		               ok: {label: '确认',className: 'btn-ok'  }  
		            },  
		            message: '请选择一行数据.',  
		            title: "提示",  
		        });
			 return;
		}
		 var susername = obj.purName;
		 var id = obj.modulePurviewId;
		bootbox.dialog({
			message : "<spring:message code="sure you want to delete"></spring:message>"+susername+"<spring:message code="what"></spring:message>",
			title : "<spring:message code="delete the user"></spring:message>",
			buttons : {
				confirm : {
					label : '<spring:message code="sure to delete"></spring:message>',
					className : "btn red btn-ok",
					callback : function() {
						$.ajax({
							type : "GET",
							url : "<%=request.getContextPath()%>/module/purview/del?id="+id,
							dataType : 'text',
							async : false,
							success : function(data) {
								if(data=="success"){
									$("#grid-table").delRowData($("#grid-table").jqGrid('getGridParam', 'selrow'));
									
								}else{
									noty({layout: 'center',text: "<spring:message code="delete the user failure"></spring:message>！",type: 'error', timeout: 2000 });
								}
							},
							error : function(data, status) {
								noty({layout: 'center',text: "<spring:message code="error"></spring:message>！",type: 'error', timeout: 2000 });
							}
						});
					}
				},
				cancel : {
					label : "<spring:message code="cancel"></spring:message>",
					className : "btn btn-danger"
				}
			}
		});
	}
	
	
	function edit(){
		var id = $("#grid-table").jqGrid('getGridParam', 'selrow');
		var moduleInfoId=$("#moduleInfoId").val();
		 var obj = null;
		 if(id){
			 obj = $("#grid-table").jqGrid('getRowData', id);
			 location.href="<%=request.getContextPath()%>/module/purview/form?id="+obj.modulePurviewId+"&moduleInfoId="+moduleInfoId;
		 }
		
	}
	
	//初始化列表
	function loadGird(id){
		if(id==""){
			id=0;
		}
		var grid_selector = "#grid-table";//列表对象
		var pager_selector = "#grid-pager";//列表分页对象
		jQuery(grid_selector).jqGrid({
			url : "<%=request.getContextPath()%>/module/purview/list_json",
			datatype : "json",
			postData:{"id":id},
			height: 300,
			colNames:[/*' ',*/ ' ','purCode','purName','purNameKey','urlPath','purDesc','createUser'],
			colModel:[
			{name:'modulePurviewId',index:'modulePurviewId', width:60, sorttype:"int", hidden: true},
			{name:'purCode',index:'purCode',width:90,sortable:false},
			{name:'purName',index:'purName', width:90,sortable:false},
			{name:'purNameKey',index:'purNameKey', width:90,sortable:false},
			{name:'urlPath',index:'urlPath', width:90,sortable:false},
			{name:'purDesc',index:'purDesc', width:90,sortable:false},
			{name:'createUser',index:'createUser', width:90,sortable:false}
			], 
			viewrecords : true,
			rowNum:10,
			
			rowList:[10,20,30],
			pager : pager_selector,
			altRows: true,
			multiselect: false,
			 multiboxonly: true,
			 loadComplete : function() {
				},
			//editurl: $path_base+"/dummy.html",//nothing is saved
			caption: "Menu List",
			autowidth: true
		});
	}
	
	//ztree 树形菜单节点点击事件
	function zTreeOnClick(event, treeId, treeNode) {
		$("#moduleMenuId").val(treeNode.moduleMenuId);
		var treeObj = $.fn.zTree.getZTreeObj("tree");
		var sNodes = treeObj.getSelectedNodes();
		
		
		if (sNodes.length > 0) {
			var level = sNodes[0].level;
			if(level==0||sNodes[0]!=null&&sNodes[0].children!=null&&sNodes[0].children.length!=null&&sNodes[0].children.length>0){
				$("#isLastMenu").val("true");
			}else{
				$("#isLastMenu").val("false");
			}
		}

		reloadTable(treeNode.moduleMenuId);

		}
		
		//js动态生成权限列表
		function  reloadTable(id){
						$("#grid-table").clearGridData(false);
						var postData = $("#grid-table").jqGrid("getGridParam", "postData");
					    $.extend(postData, {"id":id});
						$("#grid-table").trigger("reloadGrid");
					}
		
	
	function changeModule(id){
		if(id==0){
			return false;
		}
		//$("#purviewList").hide();
		$("#tree").innerHTML="";
		$("#grid-table").clearGridData(false);
	//模拟ajax请求
		 $.ajax({
			  type : "GET",
				url : "<%=request.getContextPath()%>/module/purview/findModule?id="+id,
				dataType : 'json',
				async : false,
				success : function(data) {
					var treeNodes =data;
					var setting={
							callback: {
								onClick: zTreeOnClick
							},
							data:{
							key:{
							name:"menuName",
							title:"menuName"
							},
							simpleData:{
							enable:true,
							idKey:"moduleMenuId",
							pIdKey:"parentId"
							}
							}
						};
					 $.fn.zTree.init($("#tree"), setting, treeNodes);
					 var treeObj = $.fn.zTree.getZTreeObj("tree");
					 treeObj.expandAll(true);
				}
		  });
	}
	
</script>

</head>
<body>

	<div class="page-content">
		<div class="page-header">
			<button class="btn btn-xs btn-primary" onclick="add();" id="newBtn">New</button>
			<button class="btn btn-xs btn-primary" onclick="edit();" id="editBtn">Edit</button>
			<button class="btn btn-xs btn-primary" onclick="del();" id="del">Delete</button>
			<input type="hidden" name="isLastMenu" id="isLastMenu" value="false"></input>
			<input type="hidden" name="moduleMenuId" id="moduleMenuId" ></input>
		</div>


		<div class="row">
			<div class="col-sm-4">
			请选择模块：
				<select id="moduleInfoId" onchange="changeModule(this.value)">
								<option value="0" >请选择模块</option>
								<c:forEach items="${listModuleInfos}" var="moduleInfo">
									<option value="${moduleInfo.moduleInfoId}">${moduleInfo.moduleName}</option>
								</c:forEach>
							</select>
			
				<div class="widget-box">
					<div class="widget-header widget-header-flat">
						<h4 class="smaller">
							 树形菜单
						</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main">
							<div id="tree" class="ztree"></div>
						</div>
					</div>
				</div>
			</div>

			<div id="purviewList"  class="col-sm-6">
				<div class="widget-box">
					<div class="widget-header widget-header-flat">
						<h4 class="smaller">
							权限
						</h4>
					</div>

					<div class="widget-body">
						<div class="widget-main">
							
							<!-- 列表 -->
							<table id="grid-table"></table>
							<!-- 分页 -->
							<div id="grid-pager"></div>
							
							
						</div>
					</div>
				</div>
			</div>


		</div>


	</div>
	
</body>